<template>
  <!-- 这里需要包多一层div否则样式有问题 -->
  <div>
    <div class="addProduct">
      <!-- 步骤条 -->
      <el-steps align-center :active="active" finish-status="success">
        <el-step title="填写商品信息" />
        <el-step title="填写商品促销" />
        <el-step title="填写商品属性" />
        <el-step title="填写商品关联" />
      </el-steps>

      <!-- 表格区域 -->
      <el-form
        class="formArea"
        :rules="rules"
        :model="form"
        label-width="120px"
        ref="ruleFormRef"
      >
        <!-- 第一页表单数据 -->
        <div v-show="active === 0">
          <el-form-item prop="productCategoryName" label="商品分类：">
            <el-select v-model="form.productCategoryName" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item prop="name" label="商品名称：">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item prop="subTitle" label="副标题：">
            <el-input v-model="form.subTitle" />
          </el-form-item>
          <el-form-item prop="brandName" label="商品品牌：">
            <el-select v-model="form.brandName" placeholder="请选择品牌">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品介绍：">
            <el-input
              v-model="form.description"
              type="textarea"
              placeholder="请输入内容"
            />
          </el-form-item>
          <el-form-item label="商品货号：">
            <el-input v-model="form.productSn" />
          </el-form-item>
          <el-form-item label="商品售价：">
            <el-input v-model="form.price" />
          </el-form-item>
          <el-form-item label="市场价：">
            <el-input v-model="form.originalPrice" />
          </el-form-item>
          <el-form-item label="商品库存：">
            <el-input v-model="form.stock" />
          </el-form-item>
          <el-form-item label="计量单位：">
            <el-input v-model="form.unit" />
          </el-form-item>
          <el-form-item label="商品重量：">
            <el-input
              v-model="form.weight"
              style="width: 200px; margin-right: 15px"
            />克
          </el-form-item>
          <el-form-item label="排序：">
            <el-input v-model="form.sort" />
          </el-form-item>
          <!-- 下一步按钮 -->
          <div class="next_btn">
            <el-button
              type="primary"
              size="large"
              style="margin-top: 12px"
              @click="next(ruleFormRef)"
              >下一步，填写商品促销</el-button
            >
          </div>
        </div>
        <!-- 第二页表单数据 -->
        <div v-show="active === 1">
          <el-form-item label="赠送积分：">
            <el-input v-model="form.giftPoint" />
          </el-form-item>
          <el-form-item label="赠送成长值：">
            <el-input v-model="form.giftGrowth" />
          </el-form-item>
          <el-form-item label="积分购买限制：">
            <el-input v-model="form.usePointLimit" />
          </el-form-item>
          <el-form-item label="预告商品：">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="form.preViewStatus"
            ></el-switch>
          </el-form-item>
          <el-form-item label="商品上架：">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="form.publishStatus"
            ></el-switch>
          </el-form-item>
          <el-form-item label="商品推荐：">
            <span>新品</span>
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="form.newStatus"
              style="margin: 0 8px"
            />
            <span style="margin: 0 8px">推荐</span>
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="form.recommandStatus"
            />
          </el-form-item>
          <el-form-item label="服务保证：">
            <el-checkbox-group v-model="form.serviceIds">
              <el-checkbox label="无忧退货" />
              <el-checkbox label="快速退款" />
              <el-checkbox label="免费包邮" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="详细页标题：">
            <el-input v-model="form.detailTitle" />
          </el-form-item>
          <el-form-item label="详细页描述：">
            <el-input v-model="form.detailDesc" />
          </el-form-item>
          <el-form-item label="商品关键字：">
            <el-input v-model="form.keywords" />
          </el-form-item>
          <el-form-item label="商品备注：">
            <el-input v-model="form.note" />
          </el-form-item>
          <el-form-item label="选择优惠方式">
            <el-radio-group v-model="form.promotionType">
              <el-radio-button label="无优惠" />
              <el-radio-button label="特惠促销" />
              <el-radio-button label="会员价格" />
              <el-radio-button label="阶梯价格" />
              <el-radio-button label="满减价格" />
            </el-radio-group>
          </el-form-item>
          <div style="margin-top: 40px">
            <el-button @click="front">上一步，填写商品信息</el-button>
            <el-button @click="next" type="primary"
              >下一步，填写商品属性</el-button
            >
          </div>
        </div>
        <!-- 第三页表单数据 -->
        <div v-show="active === 2"></div>
        <!-- 第四页表单数据 -->
        <div v-show="active === 3"></div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import type { FormInstance } from "element-plus";

// 定义响应式数据
const state = reactive({
  active: 1, // 步骤条的初始位置
  form: {
    // 第一页数据
    productCategoryName: "", // 商品分类
    name: "", // 商品名称
    subTitle: "", // 副标题
    brandName: "", // 商品品牌
    description: "", // 商品介绍(页面不显示)
    productSn: "", // 商品货号
    price: 0, //商品售价
    originalPrice: 0, //市场价
    stock: 0, // 商品库存
    unit: "", // 计量单位
    weight: 0, // 商品重量(克)
    sort: 0, // 排序

    // 第二页数据
    giftPoint: 0, // 赠送积分
    giftGrowth: 0, // 赠送成长值
    usePointLimit: 0, // 积分购买限制
    preViewStatus: 0, // 预告商品
    publishStatus: 0, // 商品上架
    newStatus: 0, // 新品
    recommandStatus: 0, // 推荐
    serviceIds: [""], // 服务保证，ui框架要求是一个数组，但是接口要求传递的是("1,3")，需要转为字符串
    detailTitle: "", // 详细页标题
    detailDesc: "", // 详细页描述(页面不显示)
    keywords: "", // 商品关键字
    note: "", // 商品备注
    promotionType: "无优惠", // 选择优惠方式(0,1,2,3,4)需要传入number类型
    // 1.特惠促销
    promotionStartTime: "", // 促销开始时间
    promotionEndTime: "", // 促销结束时间
    promotionPrice: "", // 促销价格
    // 2.会员价格
    memberPriceList: [
      {
        memberLevelId: 1,
        memberLevelName: "黄金会员",
        memberPrice: "",
      },
      {
        memberLevelId: 2,
        memberLevelName: "白金会员",
        memberPrice: "",
      },
      {
        memberLevelId: 3,
        memberLevelName: "钻石会员",
        memberPrice: "",
      },
    ],
    // 3.阶梯价格(可以手动添加或删除，数组元素个数不确定)
    productLadderList: [
      {
        count: "", // 数量
        discount: "", // 折扣
        price: 0, // 未知参数，默认为0
      },
    ],
    // 4.满减价格(可以手动添加或删除，数组元素个数不确定)
    productFullReductionList: [
      {
        fullPrice: "", // 满
        reducePrice: "", // 立减
      },
    ],

    // 第三页数据
    // 属性类型(未传)
    pic: "", // 商品相册
    detailHtml: "", // 规格参数

    // 第四页数据
    subjectProductRelationList: [{ subjectId: 1 }], // 关联专题(可以手动添加或删除，数组元素个数不确定)，subjectId对应的是专题中每一项的id，id顺序为1-6(number类型)
    prefrenceAreaProductRelationList: [{ prefrenceAreaId: 1 }], // 关联优选(可以手动添加或删除，数组元素个数不确定)，prefrenceAreaId对应的是优选中每一项的id，id顺序为1-4(number类型)
  },
});
const ruleFormRef = ref<FormInstance>();
let { active, form } = toRefs(state);

// 定义表单校验规则，必须要在对应的el-form-item上添加prop属性对应上这里的字段才行
const rules = reactive({
  // required：是否必填
  // message：未填时提示内容
  // trigger：触发方式
  // min，max：最短、长字符要求
  productCategoryName: [
    {
      required: true,
      message: "请选择商品分类",
      trigger: "blur",
    },
  ],
  name: [
    { required: true, message: "请输入商品名称", trigger: "change" },
    {
      min: 2,
      max: 18,
      message: "商品名称长度应为2到18个字符",
      trigger: "change",
    },
  ],
  subTitle: [
    { required: true, message: "请输入商品副标题", trigger: "change" },
  ],
  brandName: [{ required: true, message: "请选择商品品牌", trigger: "change" }],
});

// 跳转至上一页
const front = () => {
  active.value--;
};

// 跳转至下一页
const next = (ruleFormRef: FormInstance | undefined) => {
  if (!ruleFormRef) return;
  // 输入框有值，跳转到下一页
  ruleFormRef
    .validate()
    .then(valid => {
      if (valid && active.value < 3) {
        console.log(form.value);
        active.value++;
      }
    })
    .catch(err => {});
};
</script>
<style lang="less" scoped>
.addProduct {
  width: 60%;
  margin: 10px auto 10px;
  padding: 60px 50px;
  border: 1px solid #ebeef5;
  text-align: center;
  .formArea {
    margin-top: 50px;
    width: 80%;
  }
}
</style>
